<template>
  <div class="head-view">
    <div class="head-view-left">
      <img :src="manIcon" alt="" class="logo">
      <div class="title">{{appName}}</div>
    </div>
    <div class="head-view-right">
      <span class="user">{{userN.name}}</span>
      <el-dropdown @command="outSide" trigger="click">
        <span class="outUser icon-caidan07 iconfont"></span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="editPwd">修改密码</el-dropdown-item>
          <el-dropdown-item command="goOut">返回导航</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-dialog title="修改密码" :visible="editPwddialog" width="25%" @close="editPwdClose">
      <el-form label-width="80px" :model="addPwdform" :rules="addPwdrules" ref="editPwdform">
        <el-form-item label="原始密码" prop="oldPwd">
          <el-input v-model="addPwdform.oldPwd" placeholder="请输入原始密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPwd">
          <el-input v-model="addPwdform.newPwd" placeholder="请输入新密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="重复密码" prop="againPwd">
          <el-input v-model="addPwdform.againPwd" placeholder="请再次输入密码" show-password></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editPwdCancel">取消</el-button>
        <el-button type="warning" @click="editPwdKeep">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {

    components: {
      // name
    },
    name: "headerTop",
    props: {
      userN: {
        type: Object,
        default: {}
      },
      icon: {
        type: String,
        default: ""
      },
      appName: {
        type: String,
        default: ""
      },
      editPwddialog: {
        type: Boolean,
        default: false
      },
      addPwdform: {
        type: Object,
        default: {}
      }
      // msg: String //  [name: typeof]
    },
    filters: {},
    computed: {
      manIcon() {
        return `http://base.kingborn.org:27002${this.icon}`
      }
    },
    watch: {},
    data() {
      return {
        addPwdrules: {
          oldPwd: [
            {required: true, message: '请输入原始密码', trigger: 'blur'}
          ],
          newPwd: [
            {required: true, message: '请输入新密码', trigger: 'blur'}
          ],
          againPwd: [
            {required: true, message: '请再次输入密码', trigger: 'blur'}
          ]
        }
      }
    },
    created() {

    },
    mounted() {

    },
    methods: {
      outSide(command) {
        this.$emit('outSide', command);
      },
      editPwdClose() {
        this.$emit('editPwdClose');
      },
      editPwdCancel() {
        this.$emit('editPwdCancel');
      },
      editPwdKeep() {
        this.$emit('editPwdKeep');
      }
    },
    destroyed() {

    }
  }
</script>

<style scoped lang="less">
  @import url("./headerTop");
</style>
